<i18n>
{
  "en": {
    "required": "Required Product",
    "optional": "Optional Product"
  },
  "zh": {
    "required": "选配产品",
    "optional": "替代产品"
  }
}
</i18n>

<template>
<div>

    <div class="section-header">

      <div class="tab-list" @click="switchTab">
        <div class="tab-item" data-action="required" :class="{ 'active': currentTab === 'required' }">{{$t('required')}}</div>
        <div class="tab-item" data-action="optional" :class="{ 'active': currentTab === 'optional' }">{{$t('optional')}}</div>
      </div>
    </div>

    <el-table
      border
      :data="dataList"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Series"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="产品名称"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="内部型号"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="物料号"
        header-align="center">
      </el-table-column>
      <el-table-column
        align="center"
        prop="address"
        label="是否必配"
        header-align="center">
      </el-table-column>
    </el-table>


</div>

</template>

<script>



  export default {
    data() {
      return {

        // 查询表单
        searchForm: {
          keyword: '',
          line: '0',
          serial: '',
          status: '' // all
        },

        OptionalVisible: false,

        currentTab: 'required',

        // 表格加载状态
        dataListLoading: false,
        // 表格数据
        dataList: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '是'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '否'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '是'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '否'
          }],
        // currentPage: 1,
        // pageSize: 10,
        // totalPage: 0,
      };
    },
    components: {

    },
    created() {
    },
    computed: {

    },
    methods: {
      getDataList() {

      },
      switchTab({ target }) {
        const action = target.getAttribute('data-action') || target.parentElement.getAttribute('data-action');
        switch (action) {
          case 'required':
            this.currentTab = action
            break;
          case 'optional':
            this.currentTab = action
            break;
        }
      },

    }
  }
</script>

<style scoped>

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

  .tab-list {
    display: flex;
    font-size: 14px;
    color: #666;
  }

  .tab-item {
    padding: 5px 0;
    cursor: pointer;
     margin-right: 20px;
  }

.search-form >>> .el-form-item {
    display: flex;
    width: 100%;
  }
  .search-form .el-form-item >>> .el-form-item__content {
     width: 100%;
  }
  .search-form .el-form-item >>> .el-select {
    width: 100%;
  }
</style>
